<template>
  <div>
    <div style="width: 100%; height: 250px">
      <div style="height: 250px; width: 15%; float: left; margin-left: 10px">
        <el-card :body-style="{ padding: '0px' }">
          <img :src="zhanshi[0]" class="image" />
          <div style="padding: 14px">
            <span>中国机长</span>
          </div>
        </el-card>
      </div>
      <div style="height: 250px; width: 15%; float: left; margin-left: 20px">
        <el-card :body-style="{ padding: '0px' }">
          <img :src="zhanshi[1]" class="image" />
          <div style="padding: 14px">
            <span>侏罗纪世界3</span>
          </div>
        </el-card>
      </div>
      <div style="height: 250px; width: 15%; float: left; margin-left: 20px">
        <el-card :body-style="{ padding: '0px' }">
          <img :src="zhanshi[2]" class="image" />
          <div style="padding: 14px">
            <span>奇迹笨小孩</span>
          </div>
        </el-card>
      </div>
      <div style="height: 250px; width: 15%; float: left; margin-left: 20px">
        <el-card :body-style="{ padding: '0px' }">
          <img :src="zhanshi[3]" class="image" />
          <div style="padding: 14px">
            <span>月球陨落</span>
          </div>
        </el-card>
      </div>
      <div style="height: 250px; width: 15%; float: left; margin-left: 20px">
        <el-card :body-style="{ padding: '0px' }">
          <img :src="zhanshi[4]" class="image" />
          <div style="padding: 14px">
            <span>这个杀手不太冷静</span>
          </div>
        </el-card>
      </div>
      <div style="height: 250px; width: 15%; float: left; margin-left: 20px">
        <el-card :body-style="{ padding: '0px' }">
          <img :src="zhanshi[5]" class="image" />
          <div style="padding: 14px">
            <span>长津湖之水门桥</span>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script setup>
const zhanshi = [
  require('../../assets/img/中国机长.jpg'),
  require('../../assets/img/侏罗纪世界3.jpg'),
  require('../../assets/img/奇迹笨小孩.jpg'),
  require('../../assets/img/月球陨落.jpg'),
  require('../../assets/img/这个杀手不太冷静.jpg'),
  require('../../assets/img/长津湖之水门桥.jpg'),
];
</script>
<style lang="scss" scoped>
.image {
  width: 100%;
  display: block;
}
</style>
